
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>知更鸟在线考试</title>

    <link href='{{ asset("/exam/bootstrap/css/bootstrap.css") }}' rel="stylesheet" type="text/css">
    <link href='{{ asset("/exam/css/theme.css") }}' rel="stylesheet" type="text/css"/>
    <link href='{{ asset("/exam/css/writePaper.css") }}' rel="stylesheet" type="text/css">
    <script type="text/javascript" src='{{ asset("/exam/js/jquery-2.1.1.min.js") }}'></script>
    <script type="text/javascript" src='{{ asset("/exam/js/jquery.cookie.js") }}'></script>
    <script type="text/javascript" src='{{ asset("/exam/js/stopwatch.js") }}'></script>
    <script type="text/javascript" src='{{ asset("/exam/bootstrap/js/bootstrap.min.js") }}'></script>


    <link href='{{ asset("/public/Font-Awesome-3.2.1/css/font-awesome.min.css") }}' rel="stylesheet" type="text/css">

    <style>

        .oneChoice{
            position: relative;
            cursor: pointer;
        }
        .choiceHover{
            position: absolute;
            z-index: 999;
            background: rgba(255,255,255,.85);
            text-align: center;
            color: #666;
            width: 100%;
            left: 14px;
        }
    </style>
</head>
<body>
<div class="row-fluid top">
    <div class="container-fluid">
        <div class="span8">
            <a class="navbar-brand" href="">
                <img src='{{ asset("/exam/images/logo.png") }}' alt="知更鸟"/>
            </a>
            <span style="line-height: 70px;font-size: 20px;color: #FFFFFF;">知更鸟在线考试系统</span>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div id="container">
        <div class="ud-main clearfix">
            <div>
                <!-- 试卷标题 -->
                <h2 class="ud-title">
                    {% set title = "这里是考试的标题页面" %}
                    <span class="editor_titles">{{ title }}</span>
                </h2>
                {#//js添加的代码#}
                <div id="MainBox"></div>
                {#//js添加的代码↑↑↑↑↑↑↑#}
                {#<div id="question_16125" class="paperexamcontent">#}
                    {#<div class="media well">#}
                        {#<ul class="nav nav-tabs">#}
                            {#<li class="active">#}
                                {#<span class="badge badge-info questionindex">考试说明</span>#}
                            {#</li>#}
                        {#</ul>#}
                        {#<div class="media-body well text-warning">#}
                            {#一、考生必须自觉服从监考员等考试工作人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考场及其他工作地点的秩序。#}
                            {#二、考生凭《准考证》、《身份证》，按规定的时间，到指定地点参加考试。#}
                            {#三、考前20分钟考生入场，除书写用黑色签字笔、填涂用2B铅笔、橡皮擦等，有关科目必备的角尺、圆规和高中起点本、专科的数学科可带计算器外，不准携带书包、文具盒、自备垫板和任何书籍、报纸、纸张以及其他任何与考试无关物品进入考场。#}
                            {#严禁携带各种通讯工具（如移动电话）、电子录放器材（如录音笔）以及修正液（带）等物品进入考场。考生在考场内不得自行传递文具用品。#}
                        {#</div>#}
                        {#<div>#}
                            {#<div class="btn-group pull-right" >#}
                                {#<a class="btn" title="上一题">开始考试</a>#}
                            {#</div>#}
                            {#<div class="btn-group">#}
                                {#<a class="btn" title="下一题">放弃本次考试</a>#}
                            {#</div>#}
                        {#</div>#}

                    {#</div>#}
                {#</div>#}
                {#<div class="" id="questionpanel">#}
                    {#<form id="form1" name="form1" action="">#}
                        {#<div id="question_16125" class="paperexamcontent">#}
                            {#<div class="media well">#}

                                {#<ul class="nav nav-tabs">#}
                                    {#<li class="active">#}
                                        {#&#123;&#35;<a><span class="badge badge-info questionindex">1.</span></a>&#35;&#125;#}
                                        {#<span class="badge badge-info questionindex">1.</span>#}
                                    {#</li>#}
                                {#</ul>#}

                                {#<div class="media-body well text-warning">#}
                                    {#通常看到冰在0摄氏度时溶化，能否使冰在0摄氏度以下溶化？#}
                                {#</div>#}

                                {#<div class="media-body well choiceBox">#}
                                    {#<p class="oneChoice">#}
                                        {#<label class="icon-check-empty">#}
                                            {#<input type="radio" name="optionsRadios" value="A" />#}
                                            {#A:#}
                                        {#</label>#}
                                        {#能#}
                                    {#</p>#}
                                    {#<p class="oneChoice">#}
                                        {#<label class="icon-check">#}
                                            {#<input type="radio" name="optionsRadios" value="B" />#}
                                            {#B:#}
                                        {#</label>#}
                                        {#不能#}
                                    {#</p>#}
                                {#</div>#}

                                {#<ul class="nav nav-tabs">#}
                                    {#<div class="btn-group pull-right" id="prequestion">#}
                                        {#<a class="btn"  href="">下一页</a>#}
                                    {#</div>#}
                                    {#<div class="btn-group" id="nextquestion">#}
                                        {#<a class="btn" href="">上一页</a>#}
                                    {#</div>#}
                                {#</ul>#}

                            {#</div>#}
                        {#</div>#}
                    {#</form>#}
                {#</div>#}
                {#<div class="" id="questionpanel">#}
                    {#<form id="form1" name="form1" action="">#}
                        {#<div id="question_16125" class="paperexamcontent">#}
                            {#<div class="media well">#}

                                {#<ul class="nav nav-tabs">#}
                                    {#<li class="active">#}
                                        {#<span class="badge badge-info questionindex">第一题：单选题</span></a>#}
                                    {#</li>#}
                                {#</ul>#}

                                {#<div class="media-body well text-warning">#}
                                    {#每个题目只有一个选项是正确，选对得10分选错不得分，共15题，建议用时30分钟#}
                                {#</div>#}

                                {#<ul class="nav nav-tabs">#}
                                    {#<div class="btn-group pull-right" id="prequestion">#}
                                        {#<a class="btn ajax" id="btnPre" target="questionpanel"  href="/testdemo/exam.html" title="上一题">下一页</a>#}
                                    {#</div>#}
                                    {#<div class="btn-group" id="nextquestion">#}
                                        {#<a class="btn ajax" id="btnNext" target="questionpanel"  href="/testdemo/exam2.html" title="下一题">上一页</a>#}
                                    {#</div>#}
                                {#</ul>#}
                            {#</div>#}
                        {#</div>#}
                    {#</form>#}
                {#</div>#}
                {#<div class="" id="questionpanel">#}
                    {#<form id="form1" name="form1" action="">#}
                        {#<div id="question_16125" class="paperexamcontent">#}
                            {#<div class="media well">#}

                                {#<ul class="nav nav-tabs">#}
                                    {#<li class="active">#}
                                        {#<span class="badge badge-info questionindex"></span></a>#}
                                    {#</li>#}
                                    {#<div class="btn-group pull-right" id="prequestion">#}
                                        {#<a class="btn ajax" id="btnPre" target="questionpanel"  href="/testdemo/exam.html" title="上一题">下一页</a>#}
                                    {#</div>#}
                                    {#<div class="btn-group pull-right" id="nextquestion">#}
                                        {#<a class="btn ajax" id="btnNext" target="questionpanel"  href="/testdemo/exam2.html" title="下一题">上一页</a>#}
                                    {#</div>#}
                                {#</ul>#}

                                {#<div class="media-body well text-warning">#}
                                    {#通常看到冰在0摄氏度时溶化，能否使冰在0摄氏度以下溶化？#}
                                {#</div>#}

                                {#<div class="media-body well">#}
                                    {#<p>A:能</p>#}
                                    {#<p>B:不能</p>#}
                                {#</div>#}

                                {#<div class="media-body well questionanswerbox" id="answernotice">#}
                                    {#<div class="choiceBox">#}
                                        {#<div class="oneChoice radio">#}
                                            {#<label>#}
                                                {#<input type="radio" name="optionsRadios" id="optionsRadios1" rel="" value="A" />#}
                                                {#A#}
                                            {#</label>#}
                                        {#</div>#}
                                        {#<div class="oneChoice radio">#}
                                            {#<label>#}
                                                {#<input type="radio" name="optionsRadios" id="optionsRadios2" rel="" value="B" />#}
                                                {#B#}
                                            {#</label>#}
                                        {#</div>#}
                                    {#</div>#}
                                {#</div>#}
                                {#<!--计时器-->#}

                            {#</div>#}
                        {#</div>#}
                    {#</form>#}
                {#</div>#}
                <div class="ud-keep-paper">
                    <a id="ud-keep-paper" href="">提交试卷</a>
                </div>
                <div class="ud-keep-paper">
                    <form method="get" action="{{ path("WebExamCollectUserExamData") }}">
                        <input type="submit"/>
                    </form>
                </div>
            </div>
        </div>
        <div class="the-right">
            <div class="right-fixed" style="top: 270px;">
                <div id="right_fixed">
                    <div class="title-number">
                        <div class="tn-time">
                            所用时间：<strong id="minute_show"><s></s>00</strong>:<strong id="second_show"><s></s>00</strong>
                        </div>
                        <div class="tn-ordinal">
                            <p class="tn-ordinal-num" id="single" style="background: none;">试题列表：</p>

                            <p id="single_ordinal" style="display: block;">
                                <a href="javascript:void(0);" onclick="showExamItem(showList,0);">1</a>
                                <a href="javascript:void(0);" onclick="showExamItem(showList,1);">2</a>
                                <a href="javascript:void(0);" onclick="showExamItem(showList,2);">3</a>
                                <a href="javascript:void(0);" onclick="showExamItem(showList,3);">4</a>
                                <a href="javascript:void(0);" onclick="showExamItem(showList,4);">5</a>
                                <a href="javascript:void(0);" onclick="showExamItem(showList,5);">6</a>
                                <a href="javascript:void(0);" onclick="showExamItem(showList,6);">7</a>
                                <a href="" onclick="gotoExam('8');">8</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--计时器-->


<!--/计时器-->
<script type="text/javascript">
    var intDiff = parseInt(1800);//倒计时总秒数量
    function timer(intDiff) {
        window.setInterval(function () {
            var //day=0,
            //hour=0,
                    minute = 0,
                    second = 0;//时间默认值
            if (intDiff > 0) {
                $("#costTime").val(1800 - intDiff);
                //day = Math.floor(intDiff / (60 * 60 * 24));
                //hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60);// - (day * 24 * 60) - (hour * 60)
                second = Math.floor(intDiff) - (minute * 60);// - (day * 24 * 60 * 60) - (hour * 60 * 60)
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            //$('#day_show').html(day+"天");
            //$('#hour_show').html('<s id="h"></s>'+hour+'时');
            $('#minute_show').html('<s></s>' + minute);
            $('#second_show').html('<s></s>' + second);
            intDiff--;
        }, 1000);
    }

    $(function () {
        timer(intDiff);
    });
</script>
<script>
    $(function(){
        createChoiceHover();
    });

</script>
<div class="footer">
    <div class="new-main">
        <dl class="about">
            <dt>
                <a href="http://edu.yuntonggroup.com" target="_blank" title="知更鸟首页">知更鸟首页</a>|
            </dt>
            <dd>
                <a href="http://edu.yuntonggroup.com/news/1" target="_blank" title="联系我们">联系我们</a>
            </dd>
            <dd>
                <a href="http://edu.yuntonggroup.com/news/2" target="_blank" title="关于知更鸟">关于知更鸟</a>
            </dd>
            <dd>
                <a href="http://edu.yuntonggroup.com/news/3" target="_blank" title="求贤若渴">求贤若渴</a>
            </dd>
            <dd>
                <a href="http://edu.yuntonggroup.com/news/4" target="_blank" title="合作交流">合作交流</a>
            </dd>
            <dd>
                <a href="http://edu.yuntonggroup.com/news/5" target="_blank" title="常见问题">常见问题</a>
            </dd>
        </dl>
        <p style="position: absolute; right: 10px; line-height: 27px; color: #b7b7b7;">© Copyright 2018
            www.YunTongGroup.Com | All rights reserved. More Info 云通控股集团</p>
    </div>
</div>
<script src='{{ asset("/exam/js/stopwatch.js") }}'></script>
<script>
    var data = {{ data | raw}};
    var examInfo;//试卷信息
    var showList = [];
    var showListIndex = 0;

    var questionGroups;

    $(function () {
        //取出并设置试卷信息
        examInfo = data.examInfo;
        showList[showListIndex] = {
            type : "exam",
            data:examInfo
        };
        showListIndex ++;
        //开始填充数据列表
        //取出大题（分组）
        questionGroups = data.questionGroups;
        for (var index in questionGroups) {
            //把分组信息填入数据列表
            showList[showListIndex] = {
                type : "questionGroup",
                data:questionGroups[index]["groupInfo"]
            };
            showListIndex ++;
            //从分组取出题目数据
            var questions = questionGroups[index]["groupQuestions"];
            for(var questionIndex in questions){
                showList[showListIndex] = {
                    type : "question",
                    data:questions[questionIndex]
                };
                showListIndex ++;
            }
        }
//        console.log(showList);
        showExamItem(showList,0);
        $.cookie.json = true;
    });

    function showExamItem( showList , i ) {
        var type = showList[i].type;
        var data = showList[i].data;
        switch (type) {
            case "exam":
                    //创建试卷信息
                mkExam(data);
                break;
            case "questionGroup":
                    //创建大题分组
                mkQuestionGroup(data,i);
                break;
            case "question":
                    //创建题目
                mkQuestion(data,i);
                break;
            default :
        }
    }




    function mkExam(data){
        var template = {
            box : $('<div class="media well">'),
            head :$('<ul class="nav nav-tabs"><li class="active"><span class="badge badge-info questionindex"></span></li></ul>'),
            content :$('<div class="media-body well text-warning">'),
            btns :$('<div><div class="btn-group pull-right" ><a class="btn right"></a></div><div class="btn-group"><a class="btn left"></a></div></div>')
        };
        var box = template.box;
        var head = template.head;
        var content = template.content;
        var btns = template.btns;

        head.find(".questionindex").text("考试说明");
        content.html(data.intro);
        btns.find(".left").text("退出").click(cancelExam);
        btns.find(".right").text("开始考试").click(startExam);
        box.append(head).append(content).append(btns);
        $("#MainBox").html(box);
        $(".editor_titles").text(data.title);
    }

    function mkQuestionGroup(data,index){
        var template = {
            box : $('<div class="media well">'),
            head :$('<ul class="nav nav-tabs"><li class="active"><span class="badge badge-info questionindex"></span></li></ul>'),
            content :$('<div class="media-body well text-warning">'),
            btns :$('<div><div class="btn-group pull-right" ><a class="btn right"></a></div><div class="btn-group"><a class="btn left"></a></div></div>')
        };
        var box = template.box;
        var head = template.head;
        var content = template.content;
        var btns = template.btns;
        head.find(".questionindex").text(data.title);
        content.html(data.intro);
        btns.find(".left").text("返回").click(function () {
            showExamItem(showList,index - 1);
        });
        btns.find(".right").text("下一页").click(function () {
            showExamItem(showList,index + 1);
        });
        box.append(head).append(content).append(btns);
        $("#MainBox").html(box);
    }

    function mkQuestion(data,index){
        var template = {
            box : $('<div class="media well">'),
            head :$('<ul class="nav nav-tabs"><li class="active"><span class="badge badge-info questionindex"></span></li></ul>'),
            content :$('<div class="media-body well text-warning">'),
            choiceBox : $('<div class="media-body well choiceBox">'),
            btns :$('<div><div class="btn-group pull-right" ><a class="btn right"></a></div><div class="btn-group"><a class="btn left"></a></div></div>')
        };
        var box = template.box;
        var head = template.head;
        var content = template.content;
        var choices = template.choiceBox;
        var btns = template.btns;
        var latters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P"];

        head.find(".questionindex").text("第 " + data.questionInfo.questionNum + " 题：");
        content.html(data.questionInfo.title);
        console.log(data);
        var questionId = data.questionInfo.id;
        //设置题目统计数据
        head.find(".questionindex").attr("data-questionId",questionId);

        var choiceData = data.choices;
        var questionCookieData = getQuestionDataFromCookie(questionId);
        var choicesCookieData = questionCookieData.choices;
        console.log("==========");
        console.log(choicesCookieData);
        for (var i in choiceData) {
            var choiceId = choiceData[i]["id"];
            var choiceContent = choiceData[i]["Content"];
            var choiceShowBox =  $(' <p class="oneChoice"><label></label><span></span></p>');
            var num = latters[i];
            //根据cookie设置选项数据
            var timeSpend,isChecked;
            if (choicesCookieData) {
                timeSpend = choicesCookieData[i].timeSpend;
                isChecked = choicesCookieData[i].isSelected;
            }else{
                //第一次进入题目cookie并未创建时，设置默认值
                timeSpend = 0;
                isChecked = 0;
            }


            console.log("status:" + isChecked);
            choiceShowBox.find("label").append(" &nbsp;" + num + ": &nbsp;").addClass("icon-check-empty");
            choiceShowBox.find("span").text(choiceContent);
            choiceShowBox.attr("data-scanTime",timeSpend);
            choiceShowBox.attr("data-isChecked",isChecked);
            if (isChecked) {
                choiceShowBox.find("label").removeClass("icon-check-empty");
                choiceShowBox.find("label").addClass("icon-check");
            }
            //设置选项的点击事件
            choiceShowBox.click(function () {
                var _this = $(this);
                var index = _this.index();
                //检查选项是否被选择
                var isChecked = _this.find("label").hasClass("icon-check");
                var status ;
                if (isChecked) {
                    //当前是已选择的状态
                    _this.find("label").removeClass("icon-check");
                    _this.find("label").addClass("icon-check-empty");
                    status = 0;
                }else {
                    //当前是未被选择的状态
                    _this.find("label").removeClass("icon-check-empty");
                    _this.find("label").addClass("icon-check");
                    status = 1;
                }
                updateChoiceCheckStatus(questionId,index,status)
            });
            choices.append(choiceShowBox);
        }

        btns.find(".left").text("返回").click(function () {
            showExamItem(showList,index - 1);
        });
        btns.find(".right").text("下一页").click(function () {
            //提交数据 todo

            //切换至下一页面
            showExamItem(showList,index + 1);
        });
        box.append(head).append(content).append(choices).append(btns);
        $("#MainBox").html(box);
        createChoiceHover();
        //******至此界面布局已经完成↑↑↑↑↑↑↑↑↑
        //******开始数据存储框架搭建，采用cookie方式存储数据


        createCookie4Question(questionId,choiceData);
    }


    function createCookie4Question(questionId,choiceData) {
        var cookieData = $.cookie( "questionId_" + questionId );
        if (cookieData) {
            //数据存在：啥也不做
            //暂时没想到要做啥
        }else{
            //数据不存在：新建
            var questionData = {
                "questionId"    : questionId,
                "startTime"     : 0,
                "endTIme"       : 0,
                "isDifficult"   : 0,
                "isDone"        : 0,
                "choices"       : []
            };
            var choiceObject = [];
            //选项数据
            for (var n in choiceData) {
                var choiceId = choiceData[n]["id"];
                choiceObject.push({
                    "choiceId"      : choiceId,
                    "isSelected"    : 0,//未选中=0，选中=1
                    "timeSpend"     : 0//单位：秒
                });
            }
            questionData.choices = choiceObject;
            $.cookie( "questionId_" + questionId , questionData);
        }
    }
    function getQuestionDataFromCookie(questionId) {
        var cookieData = $.cookie( "questionId_" + questionId );
        if (cookieData) {
            return cookieData;
        }else{
            return false;
        }
    }

    function updateChoiceScanTime(questionId,index,timeToAdd) {
        var cookieData = getQuestionDataFromCookie(questionId);
        if ( cookieData ) {
            cookieData.choices[index].timeSpend = parseFloat(cookieData.choices[index].timeSpend) + parseFloat(timeToAdd);
            $.cookie( "questionId_" + questionId , cookieData);
        }
    }
    function updateChoiceCheckStatus(questionId,index,status) {
        var cookieData = getQuestionDataFromCookie(questionId);
        if ( cookieData ) {
            cookieData.choices[index].isSelected = status;
            $.cookie( "questionId_" + questionId , cookieData);
        }
    }

    function createChoiceHover() {
        $(".oneChoice").each(function () {
            var hoverDiv = $('<div class="choiceHover">【查看选项】知识点掌握分析助手提示：鼠标悬浮查看选项答案</div>');
            var h = $(this).height();
            hoverDiv.css("height",h);
            $(this).prepend(hoverDiv);
        });
        $(".choiceBox")
                .on("mouseover",".oneChoice", function () {
                    var _this = $(this);
                    _this.find(".choiceHover").hide();
                    //此处绑定选项用时：start
                    var testSetIntervalIndex = $(this).attr("data-setInterval");
                    if (testSetIntervalIndex != "0") {
                        return false;
                    }
                    var setIntervalIndex =  setInterval(function () {
                        var scanTime = _this.attr("data-scanTime");
                        if (!scanTime) {
                            _this.attr("data-scanTime",0);
                            scanTime = 0;
                        }
                        _this.attr("data-scanTime",parseFloat(scanTime) + 0.1);
                    },100);
                    _this.attr("data-setInterval",setIntervalIndex);
                })
                .on("mouseleave",".oneChoice", function () {

                    $(this).find(".choiceHover").show();
                    //此处绑定选项用时：end

                    var _this = $(this);
                    var index = _this.index();
                    var questionId = $("#MainBox").find(".questionindex").attr("data-questionId");
                    var setIntervalIndex = _this.attr("data-setInterval");
                    var timeToAdd = _this.attr("data-scanTime");
                    clearInterval(setIntervalIndex);
                    _this.attr("data-scanTime",0);
                    $(this).attr("data-setInterval",0);
                    updateChoiceScanTime(questionId,index,timeToAdd)
                });
    }

    function startExam(){
        showExamItem(showList,1);
        //后续功能未开发
        //考试计时开始
    }
    function cancelExam(){
        console.log("Exam canceled !");
        //提交服务器取消之，并删除所有数据
    }
    function next() {
    }
    function pre() {
    }

</script>
</body>
</html>
{#<div class="paperexamcontent">#}
    {#<div class="media well">#}
        {#<ul class="nav nav-tabs">#}
            {#<li class="active">#}
                {#<span class="badge badge-info questionindex">考试说明</span>#}
            {#</li>#}
        {#</ul>#}
        {#<div class="media-body well text-warning">#}
            {#一、考生必须自觉服从监考员等考试工作人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考场及其他工作地点的秩序。#}
            {#二、考生凭《准考证》、《身份证》，按规定的时间，到指定地点参加考试。#}
            {#三、考前20分钟考生入场，除书写用黑色签字笔、填涂用2B铅笔、橡皮擦等，有关科目必备的角尺、圆规和高中起点本、专科的数学科可带计算器外，不准携带书包、文具盒、自备垫板和任何书籍、报纸、纸张以及其他任何与考试无关物品进入考场。#}
            {#严禁携带各种通讯工具（如移动电话）、电子录放器材（如录音笔）以及修正液（带）等物品进入考场。考生在考场内不得自行传递文具用品。#}
        {#</div>#}

        {#<div class="media-body well choiceBox">#}
            {#<p class="oneChoice"><label><input type="radio" name="optionsRadios" value="" /></label><span></span></p>#}
            {#<p class="oneChoice">#}
                {#<label>#}
                    {#<input type="radio" name="optionsRadios" value="B" />#}
                    {#B:#}
                {#</label>#}
                {#不能#}
            {#</p>#}
        {#</div>#}
        {#<div><div class="btn-group pull-right" ><a class="btn right"></a></div><div class="btn-group"><a class="btn left"></a></div></div>#}

    {#</div>#}
{#</div>#}